
    /* 设置容器样式，使用flexbox布局来排列图片 */
#styles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 图片之间的间隔 */
    justify-content: center; /* 居中排列 */
}

/* 设置每个菜谱类型的样式 */
.style-item {
    width: 400px; /* 设置每个菜谱类型的宽度 */
    margin: 10px; /* 添加外边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: transform 0.2s; /* 添加过渡效果 */
}

.style-item:hover {
    transform: translateY(-5px); /* 鼠标悬停时向上移动 */
}

/* 设置图片样式，使其适应容器大小 */
.style-item img {
    width: 100%; /* 图片宽度设置为100%，以适应容器宽度 */
    height: auto; /* 图片高度自动调整，保持图片比例 */
    object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

/* 设置菜谱类型名称的样式 */
.style-name {
    text-align: center; /* 名称居中显示 */
    padding: 10px; /* 添加内边距 */
}

